import { Card, Form, Checkbox, Button, Input, message } from "antd";
import "./index.scss";
// import styles from "./index.module.scss";
import logo from "@/assets/logo.png";
import { useDispatch } from "react-redux";
import { login } from "@/store/actions";
import { useHistory, useLocation } from "react-router-dom";
const Login = () => {
  // store中 分发状态
  const dispatch = useDispatch();
  // 路由跳转
  const history = useHistory();
  const location = useLocation();

  // 登录模块
  const onFinish = async value => {
    try {
      //  触发redux 将从后台获取的token存储起来
      await dispatch(login({ mobile: value.mobile, code: value.code }));
      // 提示并跳转路由
      message.success("登录成功", 1, () => {
        history.replace(location.state?.from ?? "/home");
      });
    } catch (error) {
      // 可选操作符
      message.warning(error.response?.data?.message || "好像出错了");
    }
  };

  return (
    <div>
      <div className="login">
        {/* <div className={styles.login}> */}
        <div className="login">
          <Card className="login-container">
            <img src={logo} className="logo" alt=""/>
            <Form
              name="basic"
              size="large"
              autoComplete="on"
              onFinish={onFinish}
              validateTrigger={["onBlur", "onChange"]}
              initialValues={{
                mobile: "13800000000",
                code: "246810",
                agree: true,
              }}
            >
              <Form.Item
                name="mobile"
                rules={[
                  {
                    required: true,
                    message: "请输入手机号",
                  },
                  {
                    pattern:
                      /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                    message: "手机号格式不正确",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name="code"
                rules={[
                  {
                    required: true,
                    message: "请输入验证码",
                  },
                  {
                    pattern: /^[0-9]{6}$/,
                    message: "验证码格式不正确",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="agree"
                valuePropName="checked"
                rules={[
                  {
                    validator(rule, value) {
                      console.log(value);
                      if (value) return Promise.resolve();
                      return Promise.reject(new Error("请勾选协议"));
                    },
                  },
                ]}
              >
                <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
              </Form.Item>

              <Form.Item>
                <Button block type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default Login;
